.UserConfig {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 16px;

    &>div {
        width: 100%;

        &.UserInfo {
            flex: 1;
            background: white;
            margin-bottom: 16px;
            border-radius: 8px;
            position: relative;
            z-index: 1;
            overflow: hidden;
            box-shadow: var(--shadow-1-down);

            &>img {
                pointer-events: none;
                position: absolute;

                &.Backboard {
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: calc(100% - 64px);
                    object-fit: cover;
                    z-index: -2;
                }

                &.Avatar {
                    left: 24px;
                    bottom: 8px;
                    width: 120px;
                    height: 120px;
                    border-radius: 4px;
                    border: 8px solid white;
                }
            }

            &>.UserOptions {
                position: absolute;
                left: 168px;
                bottom: 0;
                width: calc(100% - 194px);
                height: 64px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                &>div:first-child {
                    font-family: ShuHeiTi;
                    font-weight: 600;
                    font-size: 20px;
                    color: #262626;
                }

                &>div:last-child {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    user-select: none;
                    position: relative;
                    z-index: 1;

                    &>.UserNav {
                        width: 120px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #949494;
                        font-size: 16px;
                        font-family: PingFang;
                        cursor: pointer;
                        transition: 0.2s ease all;
                        position: relative;
                        z-index: 1;

                        &>span {
                            margin: 0 4px;
                            font-size: 18px;
                        }

                        &::after,
                        &::before {
                            content: "";
                            position: absolute;
                            border-radius: 50%;
                            transform: scale(0);
                            transition: 0.2s ease transform;
                        }

                        &::after {
                            top: 4px;
                            left: 10px;
                            width: 6px;
                            height: 6px;
                        }

                        &::before {
                            top: 10px;
                            left: 16px;
                            width: 4px;
                            height: 4px
                        }

                        &:nth-child(1)::before {
                            background: #f83600;
                        }

                        &:nth-child(1)::after {
                            background: #f9d423;
                        }

                        &:nth-child(2)::before {
                            background: #00c9ff;
                        }

                        &:nth-child(2)::after {
                            background: #92fe9d;
                        }

                        &:nth-child(3)::before {
                            background: #b721ff;
                        }

                        &:nth-child(3)::after {
                            background: #21d4fd;
                        }

                        &:nth-child(4)::before {
                            background: #e8198b;
                        }

                        &:nth-child(4)::after {
                            background: #c7eafd;
                        }

                        &:hover,
                        &.active {
                            color: #262626;
                            font-weight: bold;

                            &::after,
                            &::before {
                                transform: scale(1);
                            }

                            &:nth-child(1):hover~.indicator,
                            &:nth-child(1).active~.indicator {
                                background: linear-gradient(130deg, #f83600, #f9d423);
                                left: 16px;
                            }

                            &:nth-child(2):hover~.indicator,
                            &:nth-child(2).active~.indicator {
                                background: linear-gradient(130deg, #00c9ff, #92fe9d);
                                left: 136px;
                            }

                            &:nth-child(3):hover~.indicator,
                            &:nth-child(3).active~.indicator {
                                background: linear-gradient(130deg, #b721ff, #21d4fd);
                                left: 256px;
                            }

                            &:nth-child(4):hover~.indicator,
                            &:nth-child(4).active~.indicator {
                                background: linear-gradient(130deg, #e8198b, #c7eafd);
                                left: 376px;
                            }
                        }

                    }

                    &>.indicator {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 40px;
                        height: 4px;
                        background: #262626;
                        border-radius: 5px;
                        transition: 0.2s ease left;
                    }
                }
            }
        }

        &.UserBox {
            height: 72vh;
            position: relative;
            z-index: 1;

            &>.UserBack {
                position: absolute;
                left: 0;
                top: 0;
                width: 480px;
                height: 100%;
                background: white;
                border-radius: 8px;
                box-shadow: var(--shadow-1-down);
                overflow: hidden;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                &>.Backboard {
                    width: 100%;
                    height: 32%;
                    object-fit: cover;
                    pointer-events: none;
                }

                &>.Avatar {
                    width: 100%;
                    height: 140px;
                    position: relative;
                    z-index: 1;
                    margin-top: -80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &>svg {
                        height: 120px;
                        object-fit: contain;
                    }

                    &>img {
                        width: 120px;
                        height: 120px;
                        border-radius: 50%;
                        position: absolute;
                        z-index: 1;
                        top: 12px;
                    }
                }

                &>.UserName {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    margin-bottom: 16px;

                    &>div:first-child {
                        font-family: ShuHeiTi;
                        font-weight: 600;
                        font-size: 24px;
                        font-weight: bold;
                        color: #262626;
                    }

                    &>div:last-child {
                        font-family: PingFang;
                        font-weight: 600;
                        font-size: 16px;
                        color: #637381;
                    }
                }

                &>.UserItem {
                    flex: 1;
                    padding: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    flex-direction: column;
                    border-top: 1px dashed rgba(145, 158, 171, 0.2);
                    overflow-y: scroll;

                    &::-webkit-scrollbar {
                        display: none;
                    }

                    &>div {
                        width: 100%;
                        display: flex;
                        align-items: stretch;
                        justify-content: center;
                        margin: 8px 0;

                        &>div:first-child {
                            width: 120px;
                            text-align: right;
                            margin-right: 8px;
                            font-family: PingFang;
                            font-weight: 600;
                            font-size: 16px;
                            color: #637381;
                        }

                        &>div:last-child {
                            flex: 1;
                            font-family: ShuHeiTi;
                            font-weight: 600;
                            font-size: 16px;
                            font-weight: bold;
                            color: #262626;
                        }
                    }
                }
            }

            &>.System {
                position: absolute;
                left: 496px;
                top: 0;
                width: 40%;
                height: 64%;
                background: white;
                border-radius: 8px;
                box-shadow: var(--shadow-1-down);
                padding: 16px;

                &>.More {
                    position: absolute;
                    right: 8px;
                    top: 16px;
                }

                &>.List {
                    &>div {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 48px;
                        padding: 0 8px;
                        border-bottom: 1px dashed rgba(145, 158, 171, 0.2);
                        cursor: pointer;
                        transition: all 0.35s;

                        &>div:first-child {
                            font-family: ShuHeiTi;
                            font-size: 16px;
                            color: #262626;
                        }

                        &>div:last-child {
                            font-family: DIN;
                            font-size: 16px;
                            color: #637381;
                        }

                        &:hover {
                            background: rgba(145, 158, 171, 0.2);
                        }
                    }
                }
            }

            &>.ActiveA01,
            &>.ActiveA02 {
                position: absolute;
                right: 0;
                top: 0;
                width: calc(60% - 512px);
                background: white;
                border-radius: 8px;
                box-shadow: var(--shadow-1-down);
                height: calc(64% / 3);
                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;
                overflow: hidden;

                &.ActiveA01 {
                    height: calc(64% / 3 - 32px);

                    &>div {
                        width: 100%;
                        height: 100%;
                        border-radius: 8px;
                        overflow: hidden;
                        position: relative;
                        z-index: 1;

                        &>.Backboard {
                            position: absolute;
                            z-index: -1;
                            width: 100%;
                            object-fit: contain;
                        }

                        &>div {
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, 0.35);
                            backdrop-filter: blur(2px);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;

                            &>div:first-child {
                                width: 100%;
                                padding-left: 40px;
                                font-family: ShuHeiTi;
                                font-weight: 600;
                                font-size: 20px;
                                color: white;
                                margin-bottom: 4px;
                                text-shadow: 0 0 4px #262626;
                            }

                            &>div:last-child {
                                width: 100%;
                                padding-left: 40px;
                                font-family: ShuHeiTi;
                                font-size: 16px;
                                color: white;
                                text-shadow: 0 0 4px #262626;
                            }
                        }
                    }
                }

                &.ActiveA02 {
                    padding: 16px;
                    top: calc(64% / 3 - 16px);
                    height: calc(64% * (2 / 3) + 16px);

                    &>.List {
                        flex: 1;
                        width: 100%;
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-start;
                        flex-direction: column;
                        overflow-y: scroll;

                        &::-webkit-scrollbar {
                            display: none;
                        }


                        &>div {
                            font-family: ShuHeiTi;
                            font-size: 16px;
                            color: #262626;
                            line-height: 32px;
                            cursor: pointer;
                        }
                    }
                }
            }

            &>.Options {
                position: absolute;
                right: 0;
                bottom: 0;
                width: calc(100% - 496px);
                height: calc(36% - 16px);
                background: white;
                border-radius: 8px;
                box-shadow: var(--shadow-1-down);
                padding: 16px;
                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;

                &>.List {
                    flex: 1;
                    width: 100%;
                    overflow: hidden;
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    flex-wrap: wrap;

                    &>.ListClick {
                        width: 80px;
                        height: 80px;
                        margin: 8px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 10px;
                        box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
                            -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
                        border: 1px solid rgba(0, 0, 0, 0);
                        cursor: pointer;
                        transition: transform 0.5s;

                        &>span {
                            width: 100%;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 24px;
                        }

                        &:hover {
                            box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
                                inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
                                -0.5px -0.5px 0px rgba(255, 255, 255, 1),
                                0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
                                0px 12px 10px -10px rgba(0, 0, 0, 0.05);
                            border: 1px solid rgba(0, 0, 0, 0.1);
                        }
                    }
                }
            }

            &>.ThemeConfig,
            &>.OtherConfig {
                position: absolute;
                z-index: 1;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #f9f9f9;
                border-radius: 8px;
                box-shadow: var(--shadow-1-down);
                overflow: hidden;
            }

            &>.TempList {
                position: absolute;
                left: 0;
                top: 0;
                width: 400px;
                height: 100%;
                background: #f9f9f9;
                border-radius: 8px;
                box-shadow: var(--shadow-1-down);
                padding: 16px;
                overflow: hidden;
            }

            &>.HomeConfig {
                position: absolute;
                top: 0;
                left: 416px;
                height: 100%;
                width: calc(100% - 416px);
                background: #f9f9f9;
                border-radius: 8px;
                box-shadow: var(--shadow-1-down);
                padding: 16px;
                overflow: hidden;
            }

            &>.System,
            &>.Options,
            &>.ActiveA02 {
                &>.Title {
                    font-family: ShuHeiTi;
                    font-weight: 600;
                    font-size: 24px;
                    font-weight: bold;
                    color: #262626;
                    margin-bottom: 8px;
                }
            }
        }
    }
}